<html><head>
<title>Texture</title>
<script>
var
 time = new Date()
,fps = 0
,scene
,cnv
,ctx
,im
,x1 = 0, y1 = 0
,x2 = 0, y2 = 40
,x3 = 0, y3 = 200
,x4 = 0, y4 = 240,
 dx1 = 1.1, dy1 = 1.2,
 dx2 = -2.2, dy2 = 2.1,
 dx3 = 1.2, dy3 = -1.3,
 dx4 = -1.1, dy4 = -1.2
,x5 = 320, y5 = 0
,x6 = 320, y6 = 40
,x7 = 320, y7 = 0
,x8 = 320, y8 = 240,
 dx5 = 1.3, dy5 = 1.2,
 dx6 = -1.2, dy6 = 1.1,
 dx7 = 1.2, dy7 = -1.3,
 dx8 = -1.1, dy8 = -1.2
;
var
 quality = 1/2;
function DrawImage(ctx, x1, y1, x2, y2, x3, y3, x4, y4, im, width, height, order, len) {
var
 xa = x1, ya = y1, a, i,
 xb = x2, yb = y2, w, dx, dy,
 dx1 = x3 - x1, dy1 = y3 - y1,
 le1 = Math.abs(dx1) > Math.abs(dy1) ? Math.abs(dx1) : Math.abs(dy1),
 dx2 = x4 - x2, dy2 = y4 - y2,
 le2 = Math.abs(dx2) > Math.abs(dy2) ? Math.abs(dx2) : Math.abs(dy2);
 if(le1 < le2)
  le1 = le2;
 le1 *= quality;
 dx1 /= le1; dy1 /= le1;
 dx2 /= le1; dy2 /= le1;
 for(i = 0; i < le1; ++ i) {
  w = Math.pow(Math.pow(xb - xa, 2) + Math.pow(yb - ya, 2), 1 / 2);
  dx = xb - xa, dy = yb - ya;
  a = [0, 0, -2, -1, 0, 2, -3, 4, 2][(dx < 0 ? 2 : dx ? 1 : 0) + (dy < 0 ? 6 : dy ? 3 : 0)];
  a = a < 0 ? -a * Math.PI / 2 : a * Math.PI / 2 + (dx ? Math.atan(dy / dx) : Math.PI / 2);
  ctx.save(); ctx.translate(xa, ya); ctx.rotate(a);
  ctx.drawImage(im, 0, i / le1 * height / len + height * order, width, 2 / quality / len, 0, 0, w, 2 / quality);
  ctx.restore();
  xa += dx1; ya += dy1;
  xb += dx2; yb += dy2;
 }
}
function Bezier(x1, y1, x2, y2, x3, y3, x4, y4, quality) {
var
 dx1 = x2 - x1, dy1 = y2 - y1, d1 = Math.abs(dx1) > Math.abs(dy1) ? Math.abs(dx1) : Math.abs(dy1),
 dx2 = x3 - x2, dy2 = y3 - y2, d2 = Math.abs(dx2) > Math.abs(dy2) ? Math.abs(dx2) : Math.abs(dy2),
 dx3 = x4 - x3, dy3 = y4 - y3, d3 = Math.abs(dx3) > Math.abs(dy3) ? Math.abs(dx3) : Math.abs(dy3),
 x, y, x5, y5, x6, y6, dx5, dy5, dx6, dy6, dx7, dy7,
 arr = [];
 if(isFinite(quality))
  le = quality;
 else
  le = d1 > d2 ? d1 > d3 ? d1 : d3 : d2 > d3 ? d2 : d3;
 dx1 /= le; dy1 /= le;
 dx2 /= le; dy2 /= le;
 dx3 /= le; dy3 /= le;
 for(i = 0; i <= le; ++ i) {
  dx5 = x2 - x1; dy5 = y2 - y1; dx5 /= le; dy5 /= le;
  dx6 = x3 - x2; dy6 = y3 - y2; dx6 /= le; dy6 /= le;
  x5 = x1 + dx5 * i; y5 = y1 + dy5 * i;
  x6 = x2 + dx6 * i; y6 = y2 + dy6 * i;
  dx7 = x6 - x5; dy7 = y6 - y5;
  dx7 /= le; dy7 /= le;
  x = x5 + dx7 * i; y = y5 + dy7 * i;
  arr.push({x: x, y: y});
  x1 += dx1; y1 += dy1;
  x2 += dx2; y2 += dy2;
  x3 += dx3; y3 += dy3;
 }
 return arr;
}
window.onload =
function(wnd) {
 im = document.getElementsByTagName("img")[0];
 cnv = document.getElementsByTagName("canvas")[0];
 ctx = cnv.getContext("2d");
 ctx.fillStyle = "#0000FF";
 ctx.fillRect(0, 0, cnv.width, cnv.height);
 ctx.stroke();
// setTimeout("location.href = 'http://www.gamedev.ru/pages/veros/'", 60000);
 setTimeout("Logo()", 250);
}
var
 xp = 320, xd = -5, angleX = 0, angleY = 0, angleZ = 0, ii = 0;
function Draw3D(ctx, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, x, y, z, im, im1) {
 fi = z * Math.PI / 180.0;
 xx = Math.cos(fi); yy = Math.sin(fi);
 x0 = x1 * xx - y1 * yy; y1 = y1 * xx + x1 * yy; x1 = x0;
 x0 = x2 * xx - y2 * yy; y2 = y2 * xx + x2 * yy; x2 = x0;
 x0 = x3 * xx - y3 * yy; y3 = y3 * xx + x3 * yy; x3 = x0;
 x0 = x4 * xx - y4 * yy; y4 = y4 * xx + x4 * yy; x4 = x0;
 fi = y * Math.PI / 180.0;
 xx = Math.cos(fi); yy = Math.sin(fi);
 x0 = x1 * xx - z1 * yy; z1 = z1 * xx + x1 * yy; x1 = x0;
 x0 = x2 * xx - z2 * yy; z2 = z2 * xx + x2 * yy; x2 = x0;
 x0 = x3 * xx - z3 * yy; z3 = z3 * xx + x3 * yy; x3 = x0;
 x0 = x4 * xx - z4 * yy; z4 = z4 * xx + x4 * yy; x4 = x0;
 fi = x * Math.PI / 180.0;
 xx = Math.cos(fi); yy = Math.sin(fi);
 y0 = y1 * xx - z1 * yy; z1 = z1 * xx + y1 * yy; y1 = y0;
 y0 = y2 * xx - z2 * yy; z2 = z2 * xx + y2 * yy; y2 = y0;
 y0 = y3 * xx - z3 * yy; z3 = z3 * xx + y3 * yy; y3 = y0;
 y0 = y4 * xx - z4 * yy; z4 = z4 * xx + y4 * yy; y4 = y0;
 x1 += 160; x2 += 160; x3 += 160; x4 += 160;
 y1 += 120; y2 += 120; y3 += 120; y4 += 120;
 if(im1
 && (x2 + x1) * (y2 - y1) + (x4 + x2) * (y4 - y2)
  + (x3 + x4) * (y3 - y4) + (x1 + x3) * (y1 - y3) < 0)
  scene.unshift(
   {x1: x1, y1: y1, x2: x2, y2: y2, x3: x3, y3: y3, x4: x4, y4: y4, opac: .1, image: im1}
  );
 else
  scene.push(
   {x1: x1, y1: y1, x2: x2, y2: y2, x3: x3, y3: y3, x4: x4, y4: y4, opac: 1, image: im}
  );
}
function Logo() {
 ctx.globalAlpha = 1;
 ctx.fillRect(0, 0, cnv.width, cnv.height);
 ctx.stroke();
 b1 = Bezier(x1, y1, x2, y2, x3, y3, x4, y4, 8);
 b2 = Bezier(x5, y5, x6, y6, x7, y7, x8, y8, 8);
 for(i = 1; i < b1.length; ++ i) {
  DrawImage(ctx,
            b1[i - 1].x, b1[i - 1].y, b2[i - 1].x, b2[i - 1].y,
            b1[i].x, b1[i].y, b2[i].x, b2[i].y,
            im, im.width, im.height, i / b1.length, b1.length);
 }
 x1 += dx1; y1 += dy1;
 x2 += dx2; y2 += dy2;
 x3 += dx3; y3 += dy3;
 x4 += dx4; y4 += dy4;
 if(x1 > cnv.width || x1 < 0) dx1 = -dx1;
 if(y1 > cnv.height || y1 < 0) dy1 = -dy1;
 if(x2 > cnv.width || x2 < 0) dx2 = -dx2;
 if(y2 > cnv.height || y2 < 0) dy2 = -dy2;
 if(x3 > cnv.width || x3 < 0) dx3 = -dx3;
 if(y3 > cnv.height || y3 < 0) dy3 = -dy3;
 if(x4 > cnv.width || x4 < 0) dx4 = -dx4;
 if(y4 > cnv.height || y4 < 0) dy4 = -dy4;
 x5 += dx5; y5 += dy5;
 x6 += dx6; y6 += dy6;
 x7 += dx7; y7 += dy7;
 x8 += dx8; y8 += dy8;
 if(x5 > cnv.width || x5 < 0) dx5 = -dx5;
 if(y5 > cnv.height || y5 < 0) dy5 = -dy5;
 if(x6 > cnv.width || x6 < 0) dx6 = -dx6;
 if(y6 > cnv.height || y6 < 0) dy6 = -dy6;
 if(x7 > cnv.width || x7 < 0) dx7 = -dx7;
 if(y7 > cnv.height || y7 < 0) dy7 = -dy7;
 if(x8 > cnv.width || x8 < 0) dx8 = -dx8;
 if(y8 > cnv.height || y8 < 0) dy8 = -dy8;
 setTimeout("Logo()", 2.5);
/*
 scene = [];
 house = document.getElementById("house");
 house = im;
 x1 = -64; y1 = -64; z1 = -64; x2 = -64; y2 = -64; z2 = +64;
 x3 = -64; y3 = +64; z3 = -64; x4 = -64; y4 = +64; z4 = +64;
 Draw3D(ctx, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, angleX, angleY, angleZ, im, house);
 x1 = -64; y1 = -64; z1 = -64; x2 = +64; y2 = -64; z2 = -64;
 x3 = -64; y3 = -64; z3 = +64; x4 = +64; y4 = -64; z4 = +64;
 Draw3D(ctx, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, angleX, angleY, angleZ, im, house);
 x1 = -64; y1 = -64; z1 = +64; x2 = +64; y2 = -64; z2 = +64;
 x3 = -64; y3 = +64; z3 = +64; x4 = +64; y4 = +64; z4 = +64;
 Draw3D(ctx, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, angleX, angleY, angleZ, im, house);
 for(i in scene) {
  ctx.globalAlpha = scene[i].opac;
  DrawImage(ctx, scene[i].x1, scene[i].y1, scene[i].x2, scene[i].y2, scene[i].x3, scene[i].y3, scene[i].x4, scene[i].y4, scene[i].image, scene[i].image.width, scene[i].image.height);
 }
 angleX += .025;
 angleY += 1.6;
 angleZ += .0125;
*/
 newTime = new Date();
 if(newTime.getSeconds() == time.getSeconds())
  fps ++;
 else
  time = newTime, window.status = fps, fps = 0;
 setTimeout("Logo()", 2.5);
}
</script></head>
<body>
<canvas width='320px' height='240px'></canvas>
<img src='../../../Scans/Foto/Alina.27dec2010.2.png' alt='http://www.gstatic.com/codesite/ph/images/defaultlogo.png'></img>
</body>